<template>
  <div id="app">
    <!-- 顶部 -->
    <sell-header class="sell-header" :info="shopInfo"></sell-header>
    <!-- 导航 -->
    <sell-nav class="sell-nav"></sell-nav>
    <!-- 内容 -->
    <keep-alive include="goods">
      <router-view
        :goods="goodsList"
        :info="shopInfo"
        class="sell-content"
      ></router-view>
    </keep-alive>
    <!-- 尾部 -->
    <sell-cart class="sell-cart"></sell-cart>
  </div>
</template>

<script>
import SellHeader from './views/SellHader.vue';
import SellNav from './views/SellNav.vue';
import SellCart from './views/SellCart.vue';
import { mapState } from 'vuex'
import { getGoodsList, getShopInfo } from './api';
export default {
  components: {
    SellHeader,
    SellNav,
    SellCart,
  },
  data () {
    return {
      // goodsList: [],
      shopInfo: {}
    }
  },
  computed: {
    ...mapState(["goodsList"])
  },
  created () {
    this.fetchGoodsList()
    this.fetchShopInfo()
  },
  methods: {
    async fetchGoodsList () {
      let res = await getGoodsList()
      res.goodsList.forEach(item => {
        item.foods.forEach(food => {
          food.count = 0
        })
      })
      // this.goodsList = res.goodsList.reverse()
      // console.log(' this.goodsList :>> ', this.goodsList);
      // console.log('this :>> ', this);
      this.$store.commit('ADD_GOODS', res.goodsList.reverse())
    },
    async fetchShopInfo () {
      const { data } = await getShopInfo()
      this.shopInfo = data
      console.log('data :>> ', data);
    },

  },
}
</script>

<style lang="less" scoped>
#app {
  display: flex;
  flex-direction: column;
  .sell-header {
    flex: 0 0 150px;
  }
  .sell-nav {
    flex: 0 0 50px;
  }
  .sell-content {
    flex: 1;
    overflow-y: auto;
  }
  .sell-cart {
    flex: 0 0 70px;
  }
}
</style>